<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>我的红包</title>
    <script src="https://cdn.tailwindcss.com/3.3.3"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <style>
        body {
            font-family: 'PingFang SC', sans-serif;
            background-color: #f5f7fa;
        }
        .package-card {
            background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
        }
        .package-increase {
            color: #10b981;
        }
        .package-decrease {
            color: #ef4444;
        }
        .star-rating {
            color: #fbbf24;
        }
        .package-item {
            transition: all 0.3s ease;
        }
        .package-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.1);
        }
        .status-active {
            background: linear-gradient(45deg, #ff6b6b, #ee5a24);
            color: white;
        }
        .status-expired {
            background: #f3f4f6;
            color: #9ca3af;
        }
    </style>
</head>
<body class="max-w-md mx-auto pb-20">
    <!-- 顶部导航 -->
    <header class="bg-white py-4 px-6 shadow-sm">
        <div class="flex items-center relative">
            <a href="member-center.html" class="text-gray-600 absolute left-0 z-10">
                <i class="fas fa-chevron-left text-lg"></i>
            </a>
            <h1 class="text-xl font-semibold text-center flex-1">我的红包</h1>
            <a href="#" class="text-blue-500 text-sm absolute right-0 z-10">红包规则</a>
        </div>
    </header>

    <!-- 红包总览卡片 -->
    <div class="px-4 pt-4">
        <div class="package-card rounded-xl p-6 text-white shadow-lg">
            <div class="flex justify-between items-center mb-4">
                <div>
                    <p class="text-sm opacity-90">当前红包</p>
                    <p class="text-3xl font-bold">¥680.50</p>
                </div>
                <div class="text-right">
                    <p class="text-sm opacity-90">本月获得</p>
                    <p class="text-xl font-bold">+¥180.00</p>
                </div>
            </div>
            <div class="flex justify-between text-sm opacity-90">
                <span>累计获得: ¥1,280.00</span>
                <span>已使用: ¥599.50</span>
            </div>
        </div>
    </div>

    <!-- 红包统计 -->
    <div class="px-4 mt-4">
        <div class="bg-white rounded-xl p-4 shadow-sm">
            <h3 class="text-lg font-medium text-gray-800 mb-3">红包统计</h3>
            <div class="grid grid-cols-3 gap-4">
                <div class="text-center">
                    <div class="text-xl font-bold text-green-500">+¥450.00</div>
                    <div class="text-xs text-gray-500">好评奖励</div>
                </div>
                <div class="text-center">
                    <div class="text-xl font-bold text-blue-500">+¥230.00</div>
                    <div class="text-xs text-gray-500">推荐奖励</div>
                </div>
                <div class="text-center">
                    <div class="text-xl font-bold text-purple-500">+¥150.00</div>
                    <div class="text-xs text-gray-500">订单奖励</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 筛选标签 -->
    <div class="px-4 mt-4">
        <div class="flex space-x-2 overflow-x-auto pb-2">
            <button class="px-4 py-2 bg-red-500 text-white rounded-full text-sm whitespace-nowrap">
                全部
            </button>
            <button class="px-4 py-2 bg-gray-100 text-gray-600 rounded-full text-sm whitespace-nowrap">
                好评奖励
            </button>
            <button class="px-4 py-2 bg-gray-100 text-gray-600 rounded-full text-sm whitespace-nowrap">
                推荐奖励
            </button>
            <button class="px-4 py-2 bg-gray-100 text-gray-600 rounded-full text-sm whitespace-nowrap">
                订单奖励
            </button>
        </div>
    </div>

    <!-- 红包明细列表 -->
    <div class="px-4 mt-4">
        <div class="bg-white rounded-xl shadow-sm overflow-hidden">
            <div class="p-4 border-b border-gray-100">
                <h3 class="text-lg font-medium text-gray-800">红包明细</h3>
            </div>
            
            <!-- 红包记录列表 -->
            <div class="divide-y divide-gray-100">
                <!-- 5星好评红包奖励 -->
                <div class="package-item p-4 hover:bg-gray-50">
                    <div class="flex justify-between items-start mb-2">
                        <div class="flex items-center">
                            <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-3">
                                <i class="fas fa-star text-green-500"></i>
                            </div>
                            <div>
                                <p class="font-medium text-gray-800">5星好评红包</p>
                                <p class="text-sm text-gray-500">订单号：20241201001</p>
                            </div>
                        </div>
                        <div class="text-right">
                            <p class="text-lg font-bold package-increase">+¥50.00</p>
                            <p class="text-xs text-gray-500">2024-12-01</p>
                        </div>
                    </div>
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <div class="star-rating mr-2">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                            </div>
                            <span class="text-sm text-gray-600">雇主：张女士</span>
                        </div>
                        <span class="text-xs text-gray-400">订单金额：¥500</span>
                    </div>
                </div>

                <!-- 推荐用户下单奖励 -->
                <div class="package-item p-4 hover:bg-gray-50">
                    <div class="flex justify-between items-start mb-2">
                        <div class="flex items-center">
                            <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3">
                                <i class="fas fa-user-plus text-blue-500"></i>
                            </div>
                            <div>
                                <p class="font-medium text-gray-800">推荐奖励</p>
                                <p class="text-sm text-gray-500">推荐用户：李小明</p>
                            </div>
                        </div>
                        <div class="text-right">
                            <p class="text-lg font-bold package-increase">+¥30.00</p>
                            <p class="text-xs text-gray-500">2024-12-01</p>
                        </div>
                    </div>
                    <div class="flex items-center justify-between">
                        <span class="text-sm text-gray-600">用户首单完成</span>
                        <span class="text-xs text-gray-400">订单金额：¥300</span>
                    </div>
                </div>

                <!-- 4星好评红包奖励 -->
                <div class="package-item p-4 hover:bg-gray-50">
                    <div class="flex justify-between items-start mb-2">
                        <div class="flex items-center">
                            <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-3">
                                <i class="fas fa-star text-green-500"></i>
                            </div>
                            <div>
                                <p class="font-medium text-gray-800">4星好评红包</p>
                                <p class="text-sm text-gray-500">订单号：20241130001</p>
                            </div>
                        </div>
                        <div class="text-right">
                            <p class="text-lg font-bold package-increase">+¥24.00</p>
                            <p class="text-xs text-gray-500">2024-11-30</p>
                        </div>
                    </div>
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <div class="star-rating mr-2">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="far fa-star"></i>
                            </div>
                            <span class="text-sm text-gray-600">雇主：王先生</span>
                        </div>
                        <span class="text-xs text-gray-400">订单金额：¥400</span>
                    </div>
                </div>

                <!-- 活动奖励红包 -->
                <div class="package-item p-4 hover:bg-gray-50">
                    <div class="flex justify-between items-start mb-2">
                        <div class="flex items-center">
                            <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center mr-3">
                                <i class="fas fa-gift text-purple-500"></i>
                            </div>
                            <div>
                                <p class="font-medium text-gray-800">新人活动奖励</p>
                                <p class="text-sm text-gray-500">活动：新人专享红包</p>
                            </div>
                        </div>
                        <div class="text-right">
                            <p class="text-lg font-bold package-increase">+¥100.00</p>
                            <p class="text-xs text-gray-500">2024-11-29</p>
                        </div>
                    </div>
                    <div class="flex items-center justify-between">
                        <span class="text-sm text-gray-600">新人注册奖励</span>
                        <span class="text-xs text-purple-500">活动奖励</span>
                    </div>
                </div>

                <!-- 推荐用户下单奖励 -->
                <div class="package-item p-4 hover:bg-gray-50">
                    <div class="flex justify-between items-start mb-2">
                        <div class="flex items-center">
                            <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3">
                                <i class="fas fa-user-plus text-blue-500"></i>
                            </div>
                            <div>
                                <p class="font-medium text-gray-800">推荐奖励</p>
                                <p class="text-sm text-gray-500">推荐用户：张小华</p>
                            </div>
                        </div>
                        <div class="text-right">
                            <p class="text-lg font-bold package-increase">+¥25.00</p>
                            <p class="text-xs text-gray-500">2024-11-28</p>
                        </div>
                    </div>
                    <div class="flex items-center justify-between">
                        <span class="text-sm text-gray-600">用户首单完成</span>
                        <span class="text-xs text-gray-400">订单金额：¥250</span>
                    </div>
                </div>

                <!-- 5星好评红包奖励 -->
                <div class="package-item p-4 hover:bg-gray-50">
                    <div class="flex justify-between items-start mb-2">
                        <div class="flex items-center">
                            <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-3">
                                <i class="fas fa-star text-green-500"></i>
                            </div>
                            <div>
                                <p class="font-medium text-gray-800">5星好评红包</p>
                                <p class="text-sm text-gray-500">订单号：20241127001</p>
                            </div>
                        </div>
                        <div class="text-right">
                            <p class="text-lg font-bold package-increase">+¥40.00</p>
                            <p class="text-xs text-gray-500">2024-11-27</p>
                        </div>
                    </div>
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <div class="star-rating mr-2">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                            </div>
                            <span class="text-sm text-gray-600">雇主：刘先生</span>
                        </div>
                        <span class="text-xs text-gray-400">订单金额：¥400</span>
                    </div>
                </div>

                <!-- 推荐用户下单奖励（二级分销） -->
                <div class="package-item p-4 hover:bg-gray-50">
                    <div class="flex justify-between items-start mb-2">
                        <div class="flex items-center">
                            <div class="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center mr-3">
                                <i class="fas fa-users text-indigo-500"></i>
                            </div>
                            <div>
                                <p class="font-medium text-gray-800">二级推荐奖励</p>
                                <p class="text-sm text-gray-500">二级用户：王小红</p>
                            </div>
                        </div>
                        <div class="text-right">
                            <p class="text-lg font-bold package-increase">+¥15.00</p>
                            <p class="text-xs text-gray-500">2024-11-26</p>
                        </div>
                    </div>
                    <div class="flex items-center justify-between">
                        <span class="text-sm text-gray-600">二级用户首单完成</span>
                        <span class="text-xs text-gray-400">订单金额：¥300</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 红包规则说明 -->
    <div class="px-4 mt-4 mb-6">
        <div class="bg-red-50 rounded-xl p-4">
            <h4 class="font-medium text-red-800 mb-2">红包规则</h4>
            <div class="text-sm text-red-700 space-y-1">
                <p>• 5星好评：获得订单金额10%的红包</p>
                <p>• 4星好评：获得订单金额6%的红包</p>
                <p>• 推荐用户首单：获得订单金额10%的红包</p>
                <p>• 二级推荐首单：获得订单金额5%的红包</p>
                <p>• 活动奖励：根据活动规则发放</p>
            </div>
        </div>
    </div>

    <!-- 可用红包展示 -->
    <div class="px-4 mb-6">
        <div class="bg-white rounded-xl shadow-sm p-4">
            <h3 class="text-lg font-medium text-gray-800 mb-3">可用红包</h3>
            <div class="space-y-3">
                <!-- 可用红包1 -->
                <div class="flex items-center justify-between p-3 border border-red-200 rounded-lg status-active">
                    <div class="flex items-center">
                        <div class="w-12 h-12 bg-white rounded-full flex items-center justify-center mr-3">
                            <span class="text-red-500 font-bold text-lg">¥</span>
                        </div>
                        <div>
                            <p class="font-medium">通用红包</p>
                            <p class="text-xs opacity-90">满¥100可用</p>
                        </div>
                    </div>
                    <div class="text-right">
                        <p class="font-bold text-lg">¥50.00</p>
                        <p class="text-xs opacity-90">7天后过期</p>
                    </div>
                </div>

                <!-- 可用红包2 -->
                <div class="flex items-center justify-between p-3 border border-gray-200 rounded-lg">
                    <div class="flex items-center">
                        <div class="w-12 h-12 bg-gray-100 rounded-full flex items-center justify-center mr-3">
                            <span class="text-gray-400 font-bold text-lg">¥</span>
                        </div>
                        <div>
                            <p class="font-medium text-gray-600">新人专享红包</p>
                            <p class="text-xs text-gray-500">满¥200可用</p>
                        </div>
                    </div>
                    <div class="text-right">
                        <p class="font-bold text-lg text-gray-600">¥100.00</p>
                        <p class="text-xs text-gray-500">已过期</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
